<template>
	<view class="wrap-recommend-store-list" v-if="list.length > 0">
		<view class="recommend-title-bg flex align-center">
			<text class="f-28">推荐的店铺</text>
		</view>
		
		<view class="recommend-list">
			<block v-for="(item, index) in list" :key="index">
				<view class="item flex align-center" @click="$jump.onStoreIndex(item.id)">
					<image class="file" :src="$getImageURL(item.avatar)" />
					
					<view class="info flex column just-between">
						<view class="name limit-num-line f-28">{{ item.shopname }}</view>
						
						<view class="address limit-num-line f-28">{{ item.city }}{{ item.address }}</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 列表
			 */
			list: {
				type: Array,
				default: [],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap-recommend-store-list {
		width: 100%;
		overflow: hidden;
		background-color: white;
		
		.recommend-title-bg {
			width: 100%;
			height: 80rpx;
			box-sizing: border-box;
			color: #121212;
		}
		
		.recommend-list {
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			
			.item {
				width: 100%;
				overflow: hidden;
				margin-bottom: 20rpx;
				gap: 20rpx;
				
				.file {
					width: 120rpx;
					height: 120rpx;
				}
				
				.info {
					flex: 1;
					overflow: hidden;
					--limit-num: 1;
					gap: 20rpx;
					
					.name {
						width: 100%;
						overflow: hidden;
						color: #121212;
					}
					
					.address {
						width: 100%;
						overflow: hidden;
						color: #888888;
					}
				}
			}
		}
	}
	
</style>